<template>
    <div>
        <div class="flex">
            <div>
                <m-trend text="营业额"></m-trend>
            </div>
            <div>
                <m-trend text="销售额" type="down"></m-trend>
            </div>
        </div>
        <br />
        <div class="flex">
            <div>
                <m-trend text="营业额" upIconColor="red"></m-trend>
            </div>
            <div>
                <m-trend text="销售额" type="down" downIconColor="green"></m-trend>
            </div>
        </div>
        <br />
        <!-- 插槽测试 -->
        <m-trend text="营业额"></m-trend>
        <br />
        <m-trend text="销售业绩"></m-trend>
        <!-- 插槽测试 -->
        <br />
        <!-- 翻转颜色 -->
        <m-trend text="营业额" reverseColor></m-trend>
        <m-trend text="营业额" type="down" reverseColor></m-trend>
        <!-- 翻转颜色 -->
        <br />
        <!-- 设置文字颜色 -->
        <m-trend text="营业额" upTextColor="blue"></m-trend>
        <m-trend text="销售额" type="down" downTextColor="yellow"></m-trend>
        <!-- 设置文字颜色 -->
        <br />
        <m-trend text="营业额" upTextColor="blue" upIcon="CaretTop"></m-trend>
        <m-trend text="销售额" type="down" downTextColor="yellow" downIcon="CaretBottom"></m-trend>
    </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const visible = ref<boolean>(false)


</script> 
<style lang="scss" scoped>
.flex {
    display: flex;

    div {
        margin-right: 10px;
    }
}
</style>